<template>
	<view class="audio-page">
		<view class="box-left">
			<image class="box-img" :src="image" mode="aspectFill"></image>
			<view class="page-btn" @click="clickAudio">
				<image :src="music_play ? stop_img : start_img" mode="widthFix"></image>
			</view>
		</view>
		<view class="box-content">
			<view class="content-name">{{ title }}</view>
			<view class="progress">
				<text>{{ getMinuteTime(now_time) }}</text>
				<slider :value="now_time / total_time * 100" block-size="10" block-color="#FF3333" activeColor="#FF3333"
					@change="sliderChange"></slider>
				<text>{{ getMinuteTime(total_time) }}</text>
			</view>
		</view>
	</view>
</template>

<script>
let AUDIO = uni.createInnerAudioContext();


export default {
	name: "WZS-Audio",
	props: ["music", "image", "title"],
	data() {
		return {
			music_play: false,
			// AUDIO: '',
			total_time: '',
			now_time: 0,
			timeupdata: '',
			interval: '',
			start_img: "",
			stop_img: ""
		};
	},
	mounted() {
		this.$nextTick(() => {
			this.playAudio()
			console.log(AUDIO.duration, 'AUDIO.duration');
		})
	},
	methods: {
		palyStart() {
			clearInterval(this.interval);
			this.interval = null
			clearInterval(this.timeupdata);
			this.timeupdata = null
			this.playAudio()
		},
		// 播放音乐
		playAudio() {
			AUDIO = uni.createInnerAudioContext()
			AUDIO.src = this.music
			if (this.music_play) {
				AUDIO.play()
			}
			this.interval = setInterval(() => {
				if (AUDIO.duration != 0 && !isNaN(AUDIO.duration)) {
					this.total_time = Math.round(AUDIO.duration)
					clearInterval(this.interval)
				}
			}, 100)
			this.timeupdata = setInterval(() => {
				if (this.music_play) {
					this.now_time++
					console.log("当前时间", this.getMinuteTime(this.now_time))
					if (this.now_time >= this.total_time) {
						this.stopAudio()
						this.music_play = true
						this.palyStart()
					}
				}
			}, 1000)
		},
		audioPause() {
			let lastTime = 0;
			AUDIO.onTimeUpdate(() => {
				const now = Date.now();
				// 设置一个节流时间间隔，比如100ms
				if (now - lastTime >= 200) {
					this.now_time = Math.round(AUDIO.currentTime);
					lastTime = now;
				}
			});
		},
		clickAudio() {
			if (this.music_play) {
				this.music_play = false
				AUDIO.pause()
			} else {
				this.music_play = true
				AUDIO.play()
			}
		},
		// 拖动进度条
		sliderChange(e) {
			console.log(e)
			let second = e.detail.value / 100 * this.total_time
			AUDIO.seek(second)
			this.now_time = second
		},
		// 秒转换分秒
		getMinuteTime(data) {
			let minute = parseInt(data / 60)
			let second = parseInt(data % 60)
			if (minute.toString().length == 1) minute = `0${minute}`
			if (second.toString().length == 1) second = `0${second}`
			return `${minute}:${second}`
		},
		updateMessage() {
			this.music_play = false
			AUDIO.pause()
			clearInterval(this.timeupdata)
			clearInterval(this.interval)
		},

		// 停止播放的清理函数
		stopAudio() {
			clearInterval(this.interval);  // 清除获取音频时长的定时器
			clearInterval(this.timeupdata);  // 清除更新当前播放时间的定时器
			if (AUDIO) {
				AUDIO.stop();  // 停止音频
				AUDIO.destroy();
			}
			this.music_play = false;  // 重置播放状态
			this.now_time = 0;  // 重置当前时间
		},
	},
}
</script>

<style lang="scss">
.audio-page {
	width: 100%;
	height: 150upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 3upx 3upx 6upx #ccc;
	margin-bottom: 30rpx;

	.box-left {
		width: 24%;
		height: 150upx;
		position: relative;
		display: flex;

		.box-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
		}

		.page-btn {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 3;

			image {
				width: 50upx;
				height: 50upx;
				background-color: rgba($color: #000000, $alpha: 0.3);
				border-radius: 50%;
			}
		}
	}

	.box-content {
		width: 75%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30upx;
		box-sizing: border-box;
		font-size: 24upx;

		.content-name {
			width: 100%;
			display: -webkit-box;
			/* 弹性盒模型 */
			-webkit-box-orient: vertical;
			/* 元素垂直居中*/
			-webkit-line-clamp: 1;
			/*  文字显示的行数*/
			overflow: hidden;
			/* 超出隐藏 */
		}

		.progress {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			slider {
				width: 80%;
			}
		}
	}
}
</style>
